import {Upload, Icon, Modal} from 'antd';
import * as React from "react";
import PropTypes from "prop-types"
import CommonInfo from 'common-info'
import ModalTip from "modalTip"

const maxSize = 1024 * 20;//单位k

export default class PicturesWall extends React.Component {
    static propTypes = {
        action: PropTypes.string.isRequired,
        onSuccess: PropTypes.func,
        number: PropTypes.number,
        defaultFileList: PropTypes.any,
        disabled: PropTypes.bool,//是否禁止操作
    }

    static defaultProps = {
        number: 5,
        disabled: false,//默认可操作
    }

    constructor(props) {
        super(props)
        let defaultFileList = props.defaultFileList.map(item=>({url:item.url,uid:item.id,status: 'done',name:item.url,smallUrl: item.smallUrl}))
        this.state = {
            previewVisible: false,
            previewImage: '',
            fileList: defaultFileList || []
            /*fileList: [{
                uid: '-1',
                name: 'xxx.png',
                status: 'done',
                url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
            }],*/
        };
    }

    componentWillReceiveProps(nextProps){
        let tempFileList = nextProps.defaultFileList.map(item=>({url:item.url,uid:item.id || item.uid,status: 'done',name:item.url,smallUrl: item.smallUrl}))
        let undefinedUid = tempFileList.filter(item=> item.uid == undefined)
        !undefinedUid.length && this.setState({ fileList: tempFileList})
    }


    handleBeforeUpload(file, fileList) {
        let type = file.type;
        if ("image/jpg, image/jpeg, image/png".indexOf(type) == -1) {
            ModalTip.errorTip("图片格式仅支持jpg、jpeg、png");
            return false
        }

        let size = file.size;
        if ((size / 1024) > maxSize) {
            ModalTip.errorTip("文件大小超过限制，最大可上传20M的图片！");
            return false;
        }
        return true;
    }

    handleCancel = () => this.setState({previewVisible: false})

    handlePreview = (file) => {
        this.setState({
            previewImage: file.url || file.thumbUrl,
            previewVisible: true,
        });
    }

    handleChange = ({fileList}) => {
        let arr= [];
        fileList.map(item=>{
            let fileName = item.name;
            let index1 = fileName.lastIndexOf(".");
            let index2 = fileName.length;
            let suffix = fileName.substring(index1+1, index2);
            if(suffix && (suffix== 'jpg' || suffix == 'jpeg' || suffix == 'png')){
                arr.push(item);
            }
        })
        this.setState({fileList:arr});
        let { onSuccess } = this.props;
        let list = fileList.map(item => ({
            uid: item.uid,
            status: item.status,
            normal: item.response ? item.response.data && item.response.data.normal:item.url,
            small:  item.response ? item.response.data && item.response.data.small: item.smallUrl,
        }))
        if(fileList.length == 0){
            onSuccess && onSuccess({fileList: []})
            return ;
        }
        fileList[fileList.length-1].status == "done" && onSuccess && onSuccess({fileList: list});

    }

    render() {
        const {previewVisible, previewImage, fileList} = this.state;
        let { number, disabled } = this.props;
        let action = api_host + this.props.action + "?access_token=" + CommonInfo.getAccessToken()
        const uploadButton = (
            <div>
                <Icon type="plus"/>
                <div className="ant-upload-text">上传</div>
            </div>
        );
        return (
            <div className="clearfix" style={disabled?{pointerEvents:'none'}:{}}>
                <Upload
                    disabled={disabled}
                    name="file"
                    action={action}
                    listType="picture-card"
                    fileList={fileList}
                    onPreview={this.handlePreview}
                    onChange={this.handleChange}
                    beforeUpload={this.handleBeforeUpload}
                >
                    { fileList.length >= number  ? null : uploadButton}
                </Upload>
                <Modal visible={previewVisible} footer={null} onCancel={this.handleCancel}>
                    <img alt="example" style={{width: '100%'}} src={previewImage}/>
                </Modal>
            </div>
        );
    }
}